<template>
  <div class="homeview">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <van-tabbar v-model="active" fixed border :style="{ background: 'rgb(249,250,252)' }" route>
      <van-tabbar-item v-for="item in tabbarItems" :key="item.title" replace :to="item.path">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.activedIcon : item.icon" />
        </template>
      </van-tabbar-item>
      <van-popup v-model="show" position="left" :style="{ width: '60%', height: '100%' }">
        <!-- 左弹出内容 -->
      </van-popup>
    </van-tabbar>
    <div class="controller" v-show="$store.state.songList.id">
      <song-item @click="changeSongState" :song="song">
        <template #icon>
          <van-icon name="pause-circle-o" v-show="!$store.state.songList.isPaused" size="30" />
          <van-icon name="play-circle-o" v-show="$store.state.songList.isPaused" size="30" />
        </template>
      </song-item>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import SongItem from '@/components/public/SongItem.vue';

export default {
  name: 'home-view',
  data() {
    return {
      active: 0,
      tabbarItems: [
        {
          title: '发现',
          icon: require('../assets/discover.png'), // 图片懒加载
          activedIcon: require('../assets/discover-actived.png'),
          path: '/discover',
        },
        {
          title: '我的',
          icon: require('../assets/my.png'),
          activedIcon: require('../assets/my-actived.png'), // 图片懒加载
          path: '/my',
        },
      ],
      show: false,
    };
  },
  computed: {
    ...mapState(['songList']),
    song() {
      // 从列表中查找到对应的歌曲
      return this.songList.list.find((song) => song.id == this.songList.id);
    },
  },
  components: {
    SongItem,
  },
  created() {
    this.$bus.$on('showPopup', () => {
      this.show = true;
    });
  },
  mounted() { },
  methods: {
    ...mapActions(['changeSongState']),
  },
};
</script>
<style scoped>
.van-tabbar-item--active {
  background-color: rgb(249, 250, 252);
}
</style>
